<template>
    <el-dialog center :visible.sync="show" width='fit-content' title="活动关联到经营范围"
        :before-close="cancel">
        <div class="item" v-for="item in list" style="max-height: 400px;overflow:auto">
            <div class="label">
                {{item.name}}：
            </div>
            <div class="value">
                <el-checkbox-group v-model="item.ids">
                    <el-checkbox v-for="item2 in item.list" :label="item2.businessVillageId" :key="item2.businessVillageId">{{item2.villageName}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="confirm">
                确定
            </el-button>
            <el-button @click="cancel">
                取消
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        show:{
            type:Boolean
        },
        list: {
            type: Array
        },
    },
    model:{
        event:"showDialog",
        prop:"show"
    },
    data() {
        return {
        }
    },
    methods: {
        confirm() {
            this.$emit("confirm")
        },
        cancel() {
            this.$emit("showDialog", false)
        },
    },
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    align-items: center;
    line-height: 60px;
    border-bottom: 1px solid #F2F2F2;
    .label {
        width: 90px;
        transform: translateY(-2px);
    }

    .value {
        width: 440px;
    }
}

.el-dialog__wrapper {
    ::v-deep .el-dialog{
        .el-dialog__body {
            padding: 40px !important;
        }
    }
}
</style>